<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-on指令</title>

    <!--引入vue的js库-->
    <script src="../js/vue.js"></script>

    <!--
        v-on：绑定事件  简写形式: @事件
    -->
</head>
<body>
<div id="app">
    <button v-on:click="myMethod()">按钮1</button>
    <br>
    <br>
    <button v-on:click="myMethod2">按钮2</button><!--在用Vue绑定事件指定函数时,有没有括号都可以-->
    <br>
    <br>
    <div id="divArea"
         style="width: 200px;height: 200px;border:5px solid red"
         v-on:mouseover="myMethod3"
         @mouseout="myMethod4"><!--简写形式-->
    </div>
</div>
</body>
</html>

<script>
    new Vue({//固定格式,新建Vue对象
        el: "#app",//指定Vue管控的区域
        data: {},//定义数据键值对
        methods: {//定义函数
            myMethod: function () {
                alert("哈哈")
            },
            myMethod2() {//简写形式
                alert("呵呵")
            },
            myMethod3: function () {
                document.getElementById("divArea").style.backgroundColor = "green"//Vue中支持原生JS代码
            },
            myMethod4: function () {
                document.getElementById("divArea").style.backgroundColor = "blue"
            }
        }
    })
</script>
